<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      /**
       * 函数作用域：
       *   调用函数时创建函数作用域，函数执行完毕后，函数作用域销毁
       *   每调用一次函数就会创建一个新的函数作用域，他们之间相互独立的
       *   在函数作用域中可以访问到全局作用域的变量
       *        在全局作用域中无法访问到函数作用域的变量
       *   当在函数作用域操作一个变量时，它会现在自身作用域中寻找，如果有则直接使用，
       *        如果没有，则向上一级作用域寻找,直到找到全局作用域，
       *        如果全局作用域中依然没有找到，则报错
       * 在函数中要访问全局变量可以使用window对象
       *
       */
      // null undefined  区别
      // var iiii 代表什么
      // console.dir(函数) 查看能访问scope 作用域

      var iiii;
      //  创建一个变量
      var w1 = 2222;
      var a = 11;
      // var a = 10; //
      function fun(c) {
        // var c;
        var a = "我是函数中的变量a";
        var b = 20;
        var w1 = 111;
        // console.dir(w1);

        // console.log("a="+a)

        function fun2(a) {
          var a = "我是函数fun2中的变量a";
          console.log("a=1:" + window.a);
          console.log("a=2:" + a);
          console.dir(fun2);
          console.log(iiii);
        }
        fun2("我是函数fun2调用时中的变量a");
      }
      //开辟一个空间 - 创建函数作用域对象 = {}
      console.dir(fun);

      // //开辟一个空间 - 创建函数作用域对象 = {}
      fun(11);
      /**
       * 在函数作用域也有声明提前的特性
       *  使用var关键字声明的变量，会在函数中所有代码执行之前被声明
       * 函数声明也会在函数中所有代码执行之前被声明
       *
       */

      function fun3() {
        fun4();
        var a = 35;
        // console.log(a);
        function fun4() {
          alert("Im fun4");
        }
      }
      // var c = 33;
      // 在函数中，不适用var声明变量都会成为全局变量
      function fun5() {
        // console.log("c="+c);
        //    c =10;
        d = 100;
      }
      fun5();
      console.log("d=" + d);

      // 定义形参就相当于在函数作用域中声明了变量
      var e = 23;
      function fun6(e) {
        alert(e);
      }
      var cccc = 10;
      var cccc = "111";
      function fun6(cccc) {
        console.log(cccc);
      }

      var fun6 = function () {};
      var fun6 = function () {};

      function ff(a1, a2) {
        function b(b1, b2) {
          function c(c1, c2) {
            ff();
          }
          c(); //c1、c2、this对象 b1, b2， a1, a2，window
        }
        function d(d1, d2) {}
        b();
        console.log(1);
      }
      ff();
    </script>
  </head>
  <body></body>
</html>
